<template>
  <div class="timepick">
    <div style="width:49%;border:1px ">
      <!-- v-if="!scope.row.test.editable"-->
      <el-button type="primary"  size="mini"
                 @click="!editable ?editable=true:updateDemandInfo()">{{!editable ?'修改':'确认'}}
      </el-button>
    </div>

      <el-form label-position="left" label-width="70px" size="mini" >
        <el-form-item label="产品">
           <el-col :span="5">
             <el-tag size="mini"   v-show="!editable&&demand.worker&&demand.worker.userName"> {{demand.worker?demand.worker.userName:demand.worker}}</el-tag>
             <el-select v-show="editable" size="mini" v-model="workerName" filterable placeholder="请选择" @change="workChange($event)">
               <el-option
                 v-for="item in employees"
                 :key="item.id"
                 :label="item.name"
                 :value="item">
               </el-option>
             </el-select>
           </el-col>
        </el-form-item>
        <el-form-item label="迭代名">
            <span >{{demand.name  }}</span>
        </el-form-item>
        <el-form-item label="评审时间">
          <el-col :span="5">
            <span >{{demand.reviewDate  }}</span>
          </el-col>
        </el-form-item>
        <el-form-item label="需求文档">
          <el-col :span="5">
            <span v-show="!editable"><a v-if="demand.demandURL"  :href="demand.demandURL" target="_blank">{{demand.demandURL  }}</a></span>
            <el-input  v-show="editable" v-model="demand.demandURL" size="mini"></el-input>
          </el-col>
        </el-form-item>
         <el-form-item label="UI">
          <el-col :span="5">
            <span v-show="!editable"><a v-if="demand.uiURL"    :href="demand.uiURL" target="_blank">{{demand.uiURL  }}</a></span>
            <el-input v-show="editable" v-model="demand.uiURL"
                      size="mini"></el-input>
          </el-col>
        </el-form-item>
         <el-form-item label="原型">
          <el-col :span="5">
            <span v-show="!editable"><a v-if="demand.protoTypeURL"    :href="demand.protoTypeURL" target="_blank">{{demand.protoTypeURL }}</a></span>
            <el-input v-show="editable" v-model="demand.protoTypeURL"
                      size="mini"></el-input>
          </el-col>
        </el-form-item>
         <el-form-item label="其他">
          <el-col :span="5">
            <span v-show="!editable">{{demand.extraMessage  }}</span>
            <el-input v-show="editable" v-model="demand.extraMessage"
                      size="mini"></el-input>
          </el-col>
        </el-form-item>

      </el-form>



    </div>
</template>

<script>
  import {saveDemandInfo} from '../../../api/testmanager'

    export default {
        name: "demandManager",
      data(){
          return{
            editable : false,
            workerName:'',
          }
      },
      methods:{
        updateDemandInfo(){
          this.editable=false
          saveDemandInfo(this.iterationId,this.demand)
            .then(res =>{

            }).catch(err=>{
            this.$alert(err.data, 'error')
          })

        },
        workChange(event){

          if(null !== this.demand.worker){

            this.demand.worker.userName=event.name
            this.demand.worker.userId=event.id
          }else {
            let worker = {
              id:0,
              userId:0,
              userName:''
            }
            worker.userName=event.name
           worker.userId=event.id
            this.demand.worker = worker
          }
          this.workerName = event.name

        },
        setWorkerName(){
          if(null!=this.demand.worker){
           this.workerName = this.demand.worker.userName
          }

        }
      },
      props:[
        "demand",
        "iterationId",
        "employees"
      ],
      mounted(){
        this.setWorkerName();
      }
    }
</script>

<style scoped>
  .timepick >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:125px;
  }
</style>
